<!--
element-ui二次封装表格组件
-->
<template>
  <div v-loading="loading">
    <el-table
      ref="tableRef"
      :stripe="stripe"
      :max-height="maxHeight"
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      highlight-current-row
      :size="tableSize"
      :data="data"
      v-bind="otherConfig"
      @current-change="handleTableCurrentChange"
      @selection-change="handleSelectionChange"
      @row-click="handleTableRowClick"
    >
      <template v-for="(item, index) in columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          :key="`selection_${index}`"
          type="selection"
          width="55"
          :fixed="item.fixed"
          align="center"
          header-align="center"
        />
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          :key="`index_${index}`"
          type="index"
          width="80"
          :fixed="item.fixed"
          label="序号"
          :index="item.indexMethod"
        />
        <!-- 多级表头 -->
        <el-table-column
          v-else-if="item.multi"
          :key="`multi_${index}`"
          align="center"
          :label="item.label"
        >
          <el-table-column
            v-for="(child, childIndex) in item.children"
            :key="`child_${index}_${childIndex}`"
            v-bind="child"
          />
        </el-table-column>
        <!-- 自定义内容 （进行增删改查操作等或者插入HTML） -->
        <slot
          v-else-if="item.slot"
          :name="item.slot"
          :fixed="item.fixed"
          :height="item.height"
        />
        <!-- 常规内容 -->
        <!-- show-overflow-tooltip文字超出隐藏  -->
        <el-table-column
          v-else
          :key="`normal_${index}`"
          v-bind="item"
          :fixed="item.fixed"
          :min-width="item.minWidth"
        />

      </template>
    </el-table>
    <!-- eslint-disable -->
    <!-- eslint-enable -->
    <!-- 自定义内容 -->
    <slot name="custom-content" />
  </div>
</template>

<script>
export default {
  name: 'TxhTableData',
  props: {
    columns: {
      // 参考Ds.js文件定义
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    wrapperHeight: {
      type: [Number, String],
      default: '100%'
    },
    maxHeight: {
      type: [Number, String],
      default: 'auto'
    },
    // 表格格式
    tableSize: {
      type: String,
      default: 'medium'
    },
    // 是否为斑马纹 table
    stripe: {
      type: Boolean,
      default: true
    },
    otherConfig: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  watch: {
    data() {
      // 重新请求数据时 table滚动到顶部
      this.$refs.tableRef.$refs.bodyWrapper.scrollTop = 0
    }
  },
  methods: {
    // 单选
    handleTableCurrentChange(currentRow) {
      this.$emit('changeCurrent', currentRow)
    },
    // 多选
    handleSelectionChange(currentRow) {
      this.$emit('selectionChange', currentRow)
    },
    // 手动勾单选表格
    setCurrentRadioRow(row) {
      this.$refs.tableRef.setCurrentRow(row)
    },
    // 手动勾多选表格
    toggleSelection(rows) {
      rows.forEach(row => {
        this.$refs.tableRef.toggleRowSelection(row, true)
      })
    },
    // 清空多选选择
    handleClearSelection() {
      this.$refs.tableRef.clearSelection()
    },
    // 点击行获得行数
    handleTableRowClick(currentRow) {
      this.$emit('rowClick', currentRow)
    }
  }
}
</script>

<style>
</style>
